<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover" />
	<title>C2C</title>
	<include file="Public:head" />
</head>
<body>
<header class="mui-bar mui-bar-bg mui-bar-nav">
	<a class="mui-icon mui-icon-left-nav mui-pull-left" href="{:U('Morefind/index')}"></a>
	<h1 class="mui-title color_white" style="text-transform:uppercase;">C2C交易 - {:Anchor_CNY}<i class="icons iconfont icon-ai-arrow-down"></i></h1>
	<a class="mui-btn mui-btn-link mui-pull-right" style="color:#fff;" href="{:U('Exchange/bank')}">{:L('银行卡')}</a>
</header>

<div class="mui-content">
	<div id="slider" class="mui-bar" style="padding:0 0;">
		<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
			<a class="mui-control-item mui-active" href="#item1">{:L('买入')}</a>
			<a class="mui-control-item" href="#item2">{:L('卖出')}</a>
		</div>
	</div>
</div>

<div class="mui-content cur-padding-bottom" style="margin-top:10px;">
	<div id="item1" class="mui-control-content form-exchange mui-active">
		<p class="tl buy-count">{:L('付款期限')} <b class="red">30</b> 分钟</p>
		<div class="mui-input-row mui-input-row-g">
			<span class="unit-right">CNY</span>
			<label>{:L('买入价')}</label>
			<input type="number" name="price" id="buy_price" autocomplete="off" placeholder="{:L('请输入购买价格')}" value="1.00" readonly>
		</div>
		<div class="mui-input-row mui-input-row-g">
			<span class="unit-right" style="text-transform:uppercase;">{:Anchor_CNY}</span>
			<label>{:L('买入量')}</label>
			<input type="number" name="num" id="buy_num" class="red" autocomplete="off" placeholder="{:L('请输入购买数量')}">
		</div>
		<p class="tr buy-count">{:L('需要')} <b class="red" id="buy_mum">0.00</b> CNY</p>
		<button type="button" class="mui-btn mui-btn-red" onclick="tradeadd_buy();">{:L('立即买入')}</button>
	</div>
	<div id="item2" class="mui-control-content form-exchange">
		<p class="tl buy-count">{:L('可用')} {:Anchor_CNY} <b class="green">{$cny['ky']}</b></p>
		<div class="mui-input-row mui-input-row-g">
			<span class="unit-right">CNY</span>
			<label>{:L('卖出价')}</label>
			<input type="number" name="price" id="sell_price" autocomplete="off" placeholder="{:L('请输入卖出价格')}" value="0.99" readonly>
		</div>
		<div class="mui-input-row mui-input-row-g">
			<span class="unit-right" style="text-transform:uppercase;">{:Anchor_CNY}</span>
			<label>{:L('卖出量')}</label>
			<input type="number" name="num" id="sell_num" class="green" autocomplete="off" placeholder="{:L('请输入卖出数量')}">
		</div>
		<p class="tr buy-count">{:L('需要')} <b class="green" id="sell_mum">0.00</b> CNY</p>
		<button type="button" class="mui-btn mui-btn-green" onclick="tradeadd_sell();">{:L('立即卖出')}</button>
	</div>
	
	<div class="trade_record">
		<div class="titlehead">{:L('交易记录')}<a href="#modal" class="fr"><i class="iconfont icon-jingshigantanhao"></i>{:L('买卖说明')}</a></div>
		<ul class="list-exchange">
			<volist name="list" id="vo">
				<li>
					<div class="column-info">
						<eq name="vo.otype" value="1">
							<h3 class="red" style="text-transform:uppercase;">{:L('买入')} {:Anchor_CNY}</h3>
						<else />
							<h3 class="green" style="text-transform:uppercase;">{:L('卖出')} {:Anchor_CNY}</h3>
						</eq>
						
						<span class="time">{$vo.addtime|date='Y-m-d H:i:s',###}</span>
						<eq name="vo.otype" value="1">
							<if condition="$vo.status eq 1">
								<span class="fr state blue"><i class="iconfont icon-shijian"></i>{:L('待支付')}</span>
							<elseif condition="$vo.status eq 2" />
								<span class="fr state blue"><i class="iconfont icon-shijian"></i>{:L('处理中')}</span>
							<elseif condition="$vo.status eq 3" />
								<span class="fr state green"><i class="iconfont icon-yinhangqia2"></i>{:L('支付成功')}</span>
							<elseif condition="$vo.status eq 8" />
								<span class="fr state red"><i class="iconfont icon-shanchu2"></i>{:L('已取消')}</span>
							<else />--</if>
							<span class="fr state"><a href="{:U('Exchange/payinfo',array('oid'=>$vo['id'],'aid'=>$vo['aid']))}">付款信息</a><s>|</s></span>
						<else />
							<if condition="$vo.status eq 1">
								<span class="fr state blue"><i class="iconfont icon-shijian"></i>{:L('待处理')}</span>
							<elseif condition="$vo.status eq 2" />
								<span class="fr state blue"><i class="iconfont icon-shijian"></i>{:L('处理中')}</span>
							<elseif condition="$vo.status eq 3" />
								<span class="fr state green"><i class="iconfont icon-yinhangqia2"></i>{:L('打款成功')}</span>
							<elseif condition="$vo.status eq 8" />
								<span class="fr state red"><i class="iconfont icon-shanchu2"></i>{:L('已取消')}</span>
							<else />--</if>
						</eq>
					</div>
					<div class="stream-info" style="text-transform:uppercase;">
						<div class="tl"><p class="title">数量({:Anchor_CNY})</p><p>{$vo.num}</p></div>
						<div class="tc"><p class="title">价格(CNY)</p><p>{$vo.uprice}</p></div>
						<div class="tr"><p class="title">实际成交(CNY)</p><p>{$vo.mum}</p></div>
					</div>
				</li>
			</volist>
		</ul>
	</div>
</div>

<div id="modal" class="mui-modal">
	<header class="mui-bar mui-bar-bg mui-bar-nav">
		<a class="mui-icon mui-icon-close mui-pull-right" href="#modal"></a>
		<h1 class="mui-title">{:L('买卖说明')}</h1>
	</header>
	<div class="mui-content" style="height:100%;">
		<div style="margin-top: 20px;padding: 0 15px;">
			<p>1. 买卖商户均为实名认证商户，并提供保证金，可放心交易；</p><br>
			<p>2. 商家处理时间 9:00 - 21:00 非处理时间的订单会在第二天 9:00 开始处理，一般接单后2小时内完成交易，最长处理时间不超过24小时。请在下单后30分钟内完成付款，否则会延迟到账；</p><br>
			<p>3. 单天最多只能发起<span class="red">10笔</span>卖出订单。</p><br>
			<p>4. <span class="red">禁止使用微信、支付宝、他人代付、ATM及柜台转账等第三方转账。</span>请务必使用本人绑定的银行卡通过手机银行或网银进行汇款，其它任何方式汇款都会造成延迟处理；</p><br>
			<p>5. 如果您的交易24小时内未处理，请及时联系在线客服登记。我们会有专人与您联系，请保持手机畅通。另24小时内无处理的交易订单由于有时咨询量过大，在线客服无法及时提供帮助，敬请谅解；</p>
		</div>
	</div>
</div>

<script type="text/javascript">
var trans_lock = 0;
	
$('#buy_num').bind('input propertychange', function () {
    $("#buy_mum").html((($('#buy_num').val() * $('#buy_price').val()).toFixed(8) * 1).toFixed(2));
});
$('#sell_num').bind('input propertychange', function () {
    $("#sell_mum").html((($('#sell_num').val() * $('#sell_price').val()).toFixed(8) * 1).toFixed(2));
});
	
function tradeadd_buy(){
	if(trans_lock){
		layer.msg("{:L('不要重复提交')}",{icon : 2 });
		return;
	}
	trans_lock = 1;
	
	var idcard = "{$idcard}";
	var banks = "{$banks}";	
	var logins = "{$logins}";
	if(logins == 0){
		layer.msg("{:L('请先登录！')}");
		trans_lock = 0;
		return false;
	}
	if(idcard == 0){
		layer.msg("{:L('请先实名认证！')}");
		trans_lock = 0;
		return false;
	}
	if(banks == 0){
		layer.msg("{:L('请先绑定银行卡！')}");
		trans_lock = 0;
		return false;
	}

	var price = parseFloat($('#buy_price').val());
	var num = parseFloat($('#buy_num').val());
	//var paypassword=$('#buy_paypassword').val();
	var reg = /^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$/;
	
	if(price==""||price==null||!reg.test(price)){
		layer.tips("{:L('交易价格必须大于')}0",'#buy_price',{tips : 3 });
		trans_lock = 0;
		return false;
	}
	if(num==""||num==null||!reg.test(num)){
		layer.tips("{:L('交易数量必须大于')}0",'#buy_num',{tips : 3 });
		trans_lock = 0;
		return false;
	}

	layer.load(2);

	$.post("{:U('Exchange/upTrade')}",{price : $('#buy_price').val(),num : $('#buy_num').val(),otype : 1 },function(data){
		layer.closeAll('loading');
		trans_lock = 0;	
		if (data.status==1) {
			$("#buy_num").val('');
			$("#sell_num").val('');
			$("#buy_mum").val('0.00');
			$("#sell_mum").val('0.00');
			//$('#buy_paypassword').val('');
						
			layer.msg(data.info,{icon : 1 });
            if (data.url) {
                window.location.href = data.url;
            }
			return false;
		} else {
			layer.msg(data.info,{icon : 2 });
			return false;
		}
	},'json');
}

function tradeadd_sell(){
	if(trans_lock){
		layer.msg("{:L('不要重复提交')}",{icon : 2 });
		return;
	}
	trans_lock = 1;

	var idcard = "{$idcard}";
	var banks = "{$banks}";	
	var logins = "{$logins}";
	if(logins == 0){
		layer.msg("{:L('请先登录！')}");
		trans_lock = 0;
		return false;
	}
	if(idcard == 0){
		layer.msg("{:L('请先实名认证！')}");
		trans_lock = 0;
		return false;
	}
	if(banks == 0){
		layer.msg("{:L('请先绑定银行卡！')}");
		trans_lock = 0;
		return false;
	}
	
	var price=parseFloat($('#sell_price').val());
	var num=parseFloat($('#sell_num').val());
	//var paypassword=$('#sell_paypassword').val();
	var reg = /^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$/;
	
	if(price==""||price==null||!reg.test(price)){
		layer.tips("{:L('交易价格必须大于')}0",'#sell_price',{tips : 3 });
		trans_lock = 0;
		return false;
	}
	if(num==""||num==null||!reg.test(num)){
		layer.tips("{:L('交易数量必须大于')}0",'#sell_num',{tips : 3 });
		trans_lock = 0;
		return false;
	}

	layer.load(2);

	$.post("{:U('Exchange/upMytx')}",{price : $('#sell_price').val(),num : $('#sell_num').val(),otype : 2 },function(data){
		layer.closeAll('loading');
		trans_lock = 0;
		if (data.status==1) {
			$("#buy_num").val('');
			$("#sell_num").val('');
			$("#buy_mum").html('0.00');
			$("#sell_mum").html('0.00');
			//$('#buy_paypassword').val('');
			
			layer.msg(data.info,{icon : 1 });
			setTimeout('window.location.reload()', 3000); //延迟
            if (data.url) {
                window.location.href = data.url;
            }
			return false;
		} else {
			layer.msg(data.info,{icon : 2 });
			return false;
		}
	},'json');
}
</script>
	
<script src="__PUBLIC__/Mobile/ecshe_js/mui.min.js"></script>
<script type="text/javascript">
	mui.init();
</script>
<script>
	mui.init({
		swipeBack: false
	});
	(function($) {
		$('.mui-scroll-wrapper').scroll({
			indicators: true //是否显示滚动条
		});
		var html2 = '';
		var html3 = '';
		var item2 = document.getElementById('item2');
		var item3 = document.getElementById('item3');
		document.getElementById('slider').addEventListener('slide', function(e) {
			if (e.detail.slideNumber === 1) {
				if (item2.querySelector('.mui-loading')) {
					setTimeout(function() {
						item2.querySelector('.mui-scroll').innerHTML = html2;
					}, 500);
				}
			} else if (e.detail.slideNumber === 2) {
				if (item3.querySelector('.mui-loading')) {
					setTimeout(function() {
						item3.querySelector('.mui-scroll').innerHTML = html3;
					}, 500);
				}
			}
		});
		var sliderSegmentedControl = document.getElementById('sliderSegmentedControl');
		$('.mui-input-group').on('change', 'input', function() {
			if (this.checked) {
				sliderSegmentedControl.className = 'mui-slider-indicator mui-segmented-control mui-segmented-control-inverted mui-segmented-control-' + this.value;
				//force repaint
				sliderProgressBar.setAttribute('style', sliderProgressBar.getAttribute('style'));
			}
		});
	})(mui);
</script>
</body>
</html>